import { CommonText, SchemaNodeKey } from "@/utils/constants";
import { ElTooltip } from "element-plus";
// import MiniToggle from "../components/MiniToggle";
import "../model.scss";
/**
 * 详情分类导航，根据Scheme描述分类信息
 */
//根据Schema绘制分类导航
export default defineComponent({
	emits: ["change"],
	setup(props, { emit }) {
		const schema = inject<any>(SchemaNodeKey.schema);
		const active = ref(SchemaNodeKey.basic);
		const change = (type: string) => {
			active.value = type;
			emit("change", active.value);
		};
		return () => {
			return (
				<>
					<div class="block-nav flex pl-6 pr-6 h-12 text-base">
						<NavItem
							icon="iconbx-detail"
							navKey={SchemaNodeKey.basic}
							onChange={val => change(val)}
							active={active.value == SchemaNodeKey.basic}
							schema={schema.value.properties && schema.value.properties.props.properties}
						/>
						{/* {变量模型} */}
						<NavItem
							icon="iconbx-disc"
							navKey={SchemaNodeKey.sensor}
							onChange={val => change(val)}
							active={active.value == SchemaNodeKey.sensor}
							schema={schema.value.properties}
						/>
						<NavItem
							icon="iconcpu1"
							navKey={SchemaNodeKey.config}
							onChange={val => change(val)}
							active={active.value == SchemaNodeKey.config}
							schema={schema.value.properties}
						/>
						<NavItem
							icon="iconsliders"
							navKey={SchemaNodeKey.funcs}
							onChange={val => change(val)}
							active={active.value == SchemaNodeKey.funcs}
							schema={schema.value.properties && schema.value.properties}
						/>
						<div
							onClick={() => change(SchemaNodeKey.extDevelop)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extDevelop ? "active" : ""}`}
						>
							<div class="mr-1 iconfont iconbx-terminal"></div>
							{CommonText.debugPreviewSchemaDevice}
						</div>
						{/* <MiniToggle /> */}
					</div>
				</>
			);
		};
	}
});

const NavItem = defineComponent({
	props: {
		active: {
			type: Boolean,
			default: false
		},
		navKey: {
			type: String,
			default: ""
		},
		icon: {
			type: String,
			default: ""
		},
		schema: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	emits: ["change"],
	setup(props, { emit }) {
		// const schema = inject<any>(SchemaNodeKey.gatewaySchema);
		// const profile = inject<any>(SchemaNodeKey.profile);
		return () => {
			return (
				<>
					{props.schema[props.navKey] ? (
						<div
							class={`pl-6 pr-6 item ${props.active ? "active" : ""}`}
							onClick={() => {
								emit("change", props.navKey);
							}}
						>
							<div class={`mr-1 iconfont ${props.icon} `}></div>
							{props.schema[props.navKey]?.title}
							{props.schema[props.navKey]?.description ? (
								<ElTooltip
									raw-content
									v-slots={{
										content: () => {
											return <div class="text-sm" v-html={props.schema[props.navKey].description}></div>;
										}
									}}
								>
									<i class="iconfont iconhelp-circle pl-2 "></i>
								</ElTooltip>
							) : (
								""
							)}
						</div>
					) : null}
				</>
			);
		};
	}
});
